﻿@model IList<SiteMapOrder>

@{
	ViewBag.Title = "Site Map";
}

@functions{
	int iMap = 0;
}

<style type="text/css">
	#cmsSiteMap ol {
		list-style: none;
		padding: 0;
		margin: 0;
		margin-left: 5px;
		margin-top: 2px;
		margin-bottom: 2px;
	}

	#cmsSiteMap a {
		text-decoration: none;
		color: #000000;
		border: 0;
	}

	#cmsSiteMap li {
		list-style: none;
		padding: 0;
		margin: 0;
		padding-left: 15px;
		margin-left: 5px;
		margin-bottom: 8px;
	}

	#cmsSiteMap .image-handle {
		padding: 3px;
		margin: 0;
		cursor: move;
		line-height: 25px;
	}

	#cmsSiteMap span.page-status, #cmsSiteMap span.handle-expand a {
		cursor: pointer;
	}

	#cmsSiteMap span.handle-expand {
		width: 50px !important;
		height: 25px !important;
		border: 1px dashed #ffffff;
	}

	#cmsSiteMap img {
		vertical-align: text-top;
	}

	.HighlightPH {
		height: 25px !important;
		margin: 5px;
		padding: 5px;
		border: 2px dashed #000000;
		background-color: #FFFFCC !important;
		width: 400px !important;
		display: block !important;
	}
</style>

<script src="~/Assets/Admin/Includes/jquery.ui.nestedSortable.js" type="text/javascript"></script>

<script type="text/javascript">
	var handleCssClass = 'img.image-handle';

	$(document).ready(function () {

		$("ol.sortable").bind("sortupdate", function (event, ui) {
			//alert("sortupdate");
			var id = $(ui.item).attr('id');
			var p = $(ui.item).parent().parent().attr('id');
			//alert(p + '  ->  ' + id);

			setTimeout("itterateTree();", 250);
			setTimeout("BuildOrder();", 500);
			setTimeout("FindArrowAndOpen('" + p + "');", 750);

		});

		$("ol.sortable").nestedSortable({
			disableNesting: 'no-nest',
			forcePlaceholderSize: true,
			handle: handleCssClass,
			helper: 'clone',
			items: 'li',
			maxLevels: 5,
			opacity: .6,
			placeholder: 'HighlightPH',
			revert: 250,
			tabSize: 25,
			tolerance: 'pointer',
			toleranceElement: '> span'
		});

		itterateTree();
		itterateTreeSetToggle();

	});

	function itterateTree() {
		$("#cmsSiteMap li").each(function (i) {
			setListItem(this);
		});
	}

	function itterateTreeSetToggle() {
		$("#cmsSiteMap li span.page-status").each(function (i) {
			setDblClickSpan(this);
		});
	}

	function setDblClickSpan(elm) {
		$(elm).dblclick(function () {
			var target = $(elm).parent();
			var h = target.html();

			if (h.indexOf("ToggleTree") > 0) {
				var lnk = $(target).find("a");
				ToggleTree(lnk);
			}
		});
	}

	function setListItem(item) {

		var imgNode = $(item).find(handleCssClass).first();
		var id = $(imgNode).attr('id');
		//alert(id);
		var node = $(imgNode).parent();
		var nodeNav = $(node).find("span.handle-expand");
		var nodeStat = $(node).find("span.page-status");

		var h = nodeNav.html();
		//var t = nodeNav.text();
		var lst = $(item).find("ol").first();
		var blankField = '&nbsp;&#9671;&nbsp; ';
		//alert($(item).find("ol li").length + '  : ' + h);

		if ($(item).find("ol li").length < 1) {
			var lnk = nodeNav.find("a").first();
			lnk.remove();
			nodeNav.html(blankField);
		} else {
			if (h.indexOf("ToggleTree") < 0) {
				//nodeNav.html('<a state="close" id="menu-lnk-' + id + '" onclick="ToggleTree(this);" href="javascript:void(0);">&#9658;</a>  ' + t); // &#9660;
				nodeNav.html('&nbsp;<a state="close" id="menu-lnk-' + id + '" onclick="ToggleTree(this);" href="javascript:void(0);">&#9658;</a>&nbsp; '); // &#9660;
				lst.attr('style', 'display:none;');
			}
		}
	}

	function FindArrowAndOpen(n) {
		if (n.length > 28) {
			var node = $('#' + n);
			//alert(n)
			var a = node.find(handleCssClass).parent().find("a").first();
			if (a != null) {
				//alert(a.attr('state'));
				a.attr('state', 'close');
				ToggleTree(a);
			}
		}
	}

	function ToggleTree(arrow) {
		var a = $(arrow);
		//alert($(arrow).text() + '  ' + $(arrow).parent().parent().attr('id'));
		var lst = a.parent().parent().parent().find("ol").first();
		if (a.attr('state') != 'open') {
			a.html("&#9660;");
			lst.attr('style', 'display:block;');
			a.attr('state', 'open');
		} else {
			a.html("&#9658;");
			lst.attr('style', 'display:none;');
			a.attr('state', 'close');
		}
	}

	function BuildOrder() {

		$("#cmsSiteMap li").each(function (i) {
			var itm = $(this);
			var id = itm.prop('id');
			var fn = itm.attr('fn');

			var p = itm.parent().parent().attr('id');

			if (p.length < 28) {
				p = '@Guid.Empty';
			}

			$("[name='[" + i + "].NavOrder']").val(i * 5);
			$("[name='[" + i + "].FileName']").val(fn);
			$("[name='[" + i + "].Root_ContentID']").val(id);
			$("[name='[" + i + "].Parent_ContentID']").val(p);

		});
	}

	$(document).ready(function () {
		setTimeout("BuildOrder();", 250);
	});
</script>

@helper DisplayMapping(Guid? parentId) {
	foreach (SiteMapOrder mo in Model.Where(x => x.Parent_ContentID == parentId).OrderBy(x => x.NavOrder)) {

		<li id="@mo.Root_ContentID" fn="@mo.FileName">
			<span class="page-info" id="@String.Format("handle-{0}", mo.Root_ContentID)">
				<span class="handle-expand" id="@String.Format("filename-{0}", mo.Root_ContentID)">
					&nbsp;
				</span>
				<img src="~/Assets/Admin/Images/webpage.png" class="imgNoBorder image-handle" title="webpage" alt="webpage" id="@String.Format("img-{0}", mo.Root_ContentID)" />
				<span class="page-status">
					<a href="@mo.FileName" target="_blank">
						@mo.FileName &nbsp;&nbsp;&nbsp;&nbsp; [<b>@mo.NavMenuText</b>]
					</a> &nbsp;&nbsp;&nbsp;&nbsp;

					@if (!mo.PageActive) {
						<img alt="status" title="no" class="image-status-icon" src="~/Assets/Admin/Images/cancel.png" />
					} else {
						<img alt="status" title="yes" class="image-status-icon" src="~/Assets/Admin/Images/accept.png" />
					}

					@if (!mo.ShowInSiteNav) {
						<img alt="navstatus" title="no" class="image-navstatus-icon" src="~/Assets/Admin/Images/lightbulb_off.png" />
					} else {
						<img alt="navstatus" title="yes" class="image-navstatus-icon" src="~/Assets/Admin/Images/lightbulb.png" />
					}
				</span>
			</span>

			@if (Model.Where(x => x.Parent_ContentID == mo.Root_ContentID).Any()) {
				<ol>
					@DisplayMapping(mo.Root_ContentID)
				</ol>
			}
		</li>
	}

	iMap++;
}

@using (Html.BeginForm()) {
	@Html.AntiForgeryToken()

	<p id="btnSaveButtonDiv">
		<input type="submit" name="btnSaveButton" value="Save Sitemap" id="btnSaveButton" />
	</p>

	<div id="cmsSiteMap">
		<ol class="sortable">
			@DisplayMapping(null)
		</ol>
	</div>

	<div style="display:none;">
		@for (iMap = 0; iMap < Model.Count; iMap++) {
			<div>
				@iMap

				@Html.TextBoxFor(m => Model[iMap].NavOrder)
				@Html.TextBoxFor(m => Model[iMap].FileName)
				@Html.TextBoxFor(m => Model[iMap].Root_ContentID)
				@Html.TextBoxFor(m => Model[iMap].Parent_ContentID)
			</div>
		}
	</div>

}